#app {
	.main-container {
		width: 100%;
		height: 100%;
		transition: margin-left 0.28s;
		position: relative;
		flex: 1;
		overflow-x: hidden;
	}

	.sidebarHide {
		margin-left: 0 !important;
	}

	.sidebar-container {
		-webkit-transition: width 0.28s;
		transition: width 0.28s;
		width: $base-sidebar-width !important;
		background-color: $base-menu-background;
		height: 100%;
		position: relative;
		font-size: 0px;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		box-shadow: 1px 0px 1px 1px rgba(191, 191, 191, 0.2);
		flex: none;

		// reset element-ui css
		.horizontal-collapse-transition {
			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
		}

		.scrollbar-wrapper {
			overflow-x: hidden !important;
		}

		.el-scrollbar__bar.is-vertical {
			right: 0px;
		}

		.el-scrollbar {
			height: 100%;
		}

		&.has-logo {
			.el-scrollbar {
				height: calc(100% - 50px);
			}
		}

		.is-horizontal {
			display: none;
		}

		a {
			display: inline-block;
			width: 100%;
			overflow: hidden;
		}

		.menu-title {
			margin-left: 4px;
		}

		.el-menu {
			border: none;
			height: 100%;
			width: 100% !important;
			.el-sub-menu__icon-arrow {
				font-size: 14px;
			}
		}
		.el-menu-item {
			color: var(--el-text-color-regular);
			&:hover {
				color: var(--el-menu-active-color);
			}
			.menu-svg-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 24px;
				height: 24px;
				color: #999;
				.svg-icon {
					width: 24px;
					height: 24px;
				}
			}
			&.is-active {
				color: var(--el-menu-active-color) !important;
				background-color: var(--el-color-primary-light-9);
				&::before {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 4px;
					content: "";
					background-color: var(--el-color-primary);
				}
				.menu-svg-icon {
					color: var(--el-menu-active-color);
				}
			}
		}
		.el-sub-menu {
			.el-sub-menu__title {
				color: #666 !important;
			}
			.menu-svg-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 24px;
				height: 24px;
				flex: none;
				color: #999;
				.svg-icon {
					width: 24px;
					height: 24px;
				}
			}
			&.is-active:not(.is-opened) > .el-sub-menu__title {
				color: var(--el-menu-active-color) !important;
				.menu-svg-icon {
					color: var(--el-menu-active-color);
				}
				&::before {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 4px;
					content: "";
					background-color: var(--el-color-primary);
				}
			}
		}
	}

	.hideSidebar {
		.sidebar-container {
			width: 56px !important;
			.el-menu-item {
				padding: 0;
				.el-tooltip__trigger {
					padding: 0 16px;
				}
				&.is-active {
					.menu-svg-icon {
						color: #fff;
						background-color: var(--el-menu-active-color);
						border-radius: 4px;
					}
					color: var(--el-menu-active-color);
					background: none;
					&::before {
						display: none;
					}
				}
			}
			.el-sub-menu {
				.el-sub-menu__title {
					padding: 0 16px;
				}
				&.is-active > .el-sub-menu__title {
					padding: 0 16px;
					.menu-svg-icon {
						color: #fff;
						background-color: var(--el-menu-active-color);
						border-radius: 4px;
					}
					color: var(--el-menu-active-color);
					&::before {
						display: none;
					}
				}
			}
		}
		.sub-menu-title-noDropdown {
			padding: 0 !important;
			position: relative;
		}

		.el-menu--collapse {
			.el-sub-menu {
				& > .el-sub-menu__title {
					& > span {
						height: 0;
						width: 0;
						overflow: hidden;
						visibility: hidden;
						display: inline-block;
					}
					& > i {
						height: 0;
						width: 0;
						overflow: hidden;
						visibility: hidden;
						display: inline-block;
					}
				}
			}
		}
	}

	.el-menu--collapse .el-menu .el-sub-menu {
		min-width: $base-sidebar-width !important;
	}

	// mobile responsive
	.mobile {
		.main-container {
			margin-left: 0px;
		}

		.sidebar-container {
			transition: transform 0.28s;
			width: $base-sidebar-width !important;
		}

		&.hideSidebar {
			.sidebar-container {
				pointer-events: none;
				transition-duration: 0.3s;
				transform: translate3d(-$base-sidebar-width, 0, 0);
				position: fixed;
			}
		}
	}

	.withoutAnimation {
		.main-container,
		.sidebar-container {
			transition: none;
		}
	}
}

// when menu collapsed
.el-menu--vertical {
	& > .el-menu {
		.menu-svg-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 24px;
			height: 24px;
			margin-right: 5px;
		}
	}

	.nest-menu .el-sub-menu > .el-sub-menu__title,
	.el-menu-item {
		color: #666 !important;
		&:hover {
			// you can use $sub-menuHover
			color: var(--el-menu-active-color) !important;
			background-color: var(--el-color-primary-light-9);
		}
	}

	// the scroll bar appears when the sub-menu is too long
	> .el-menu--popup {
		max-height: 100vh;
		overflow-y: auto;

		&::-webkit-scrollbar-track-piece {
			background: #d3dce6;
		}

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			background: #99a9bf;
			border-radius: 20px;
		}
	}
}
